<template>

	<view style="position: fixed;top: 0;">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="padding:10rpx 30rpx 0rpx;">
			<u-icon name="setting" size="50" color="#7a7e83" style="margin-right: 590rpx;"></u-icon>
			<u-icon name="more-dot-fill" size="50" color="#7a7e83"></u-icon>
		</view>
		<view class="my">
			<view class="my-view">
				<u-avatar :src="url+user.icon" mode="square" size="large">
				</u-avatar>
				<view class="text-wrap">
					<view v-if="user.nickname != ''">
						<view style="display: flex;flex-direction: row;">
							<view class="name_v">{{user.nickname}}</view>
							<u-icon name="edit-pen" size="50" color="#4b5ad9" @click="userRevise"></u-icon>
						</view>
					</view>
					<view v-if="user.nickname == ''">
						<view style="display: flex;flex-direction: row;">
							<view class="name_v" @click="navClick" style="color: #4b5ad9;">未登录/注册</view>
						</view>
					</view>
					<text>ID号:{{user.uuId}}</text>
				</view>
			</view>
			<text class="my-text">个签:人类早已可以乘太空船登上月球，却仍无法窥探他人内心的宇宙</text>
			<view style="display: flex;flex-direction: row;">
				<view class="demo-bt">草稿</view>
			</view>
		</view>
		
		<view class="con-view">
			<view class="tab-view">
				<u-tabs-swiper ref="uTabs" :list="tab" :current="current" @change="tabsChange" :is-scroll="false"
					swiperWidth="600" active-color="#4b5ad9"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
				style="margin-top: -65rpx;height: 950rpx;">
				<swiper-item class="swiper-item" v-for="(item, index) in tab" :key="index">
					<scroll-view scroll-y style="height: 1300rpx;width: 100%;" @scrolltolower="onreachBottom">
						<view class="wrap">
							<u-waterfall v-model="flowList" ref="uWaterfall">
								<template v-slot:left="{leftList}">
									<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
										@click="clickUrl(item.id,item)">
										<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
										<u-lazy-load threshold="-450" border-radius="10" :image="url+item.image[0]"
											:index="index">
										</u-lazy-load>
										<view class="demo-title">
											{{item.title}}
										</view>
										<view class="demo-tag">
											<image src="../../../static/images/navigation/zan.png"></image>
											<view class="demo-tag-text">
												{{item.likes}}
											</view>
											<u-avatar :src="url+user.icon" mode="circle" size="60"></u-avatar>
										</view>
									</view>
								</template>
								<template v-slot:right="{rightList}">
									<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
										@click="clickUrl(item.id,item)">
										<u-lazy-load threshold="-450" border-radius="10" :image="url+item.image[0]"
											:index="index">
										</u-lazy-load>
										<view class="demo-title">
											{{item.title}}
										</view>
										<view class="demo-tag">
											<image src="../../../static/images/navigation/zan.png"></image>
											<view class="demo-tag-text">
												{{item.likes}}
											</view>
											<u-avatar :src="url+user.icon" mode="circle" size="60"></u-avatar>
										</view>
									</view>
								</template>
							</u-waterfall>
						</view>
						<view style="height: 420rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.$url,
				user: {
					uuId: uni.getStorageSync('uuId'),
					icon: '',
					nickname: '',
				},
				tab: [{
					name: '发布'
				}, {
					name: '收藏'
				}, {
					name: '赞过'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				flowList: [],
				dynamic: [],
				imgurl: [],
				form: {
					page: 0,
					limit: '8',
				},
			};
		},

		onShow() {
			this.user.icon = uni.getStorageSync('icon');
			this.user.nickname = uni.getStorageSync('nickname');
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.show();
				}, 100)
			}
		},
		onLoad() {
			this.url = this.$url;
			this.apiData();
		},
		onReachBottom() {
			// 数据加载 
			setTimeout(() => {
				this.apiData();
			}, 1000)
		},
		methods: {
			//导航点击的跳转处理函数
			navClick() {
				uni.navigateTo({
					url: '/pages/index/login'
				})
			},
			userRevise() {
				uni.navigateTo({
					url: '/pages/user/userRevise/userRevise'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			addRandomData() {
				if (this.dynamic != null) {
					for (let i = 0; i < this.dynamic.length; i++) {
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱 
						let url = JSON.stringify(this.dynamic[i].image);
						url = url.substr(1);
						url = url.substring(0, url.length - 1);
						this.imgurl = url.split(','); 
						let key = "image";
						this.dynamic[i][key] = this.imgurl;
						// let item = JSON.parse(JSON.stringify(this.dynamic[index]))
						let item = this.dynamic[i];
						this.flowList.push(item);
						console.log(this.flowList);
					}
				}
			},
			apiData() {
				this.form.page = this.form.page + 1;
				this.$sendRequest({
					url: "/dynamic/oneLists",
					method: 'GET',
					data: this.form,
					success: (res) => {
						this.dynamic = res.data.records
						this.addRandomData();
					}
				})
			},
			clickUrl(id, item) {
				uni.navigateTo({
					url: "/pages/dynamicDetails/oneDynamic/oneDynamic?dynamic=" + encodeURIComponent(JSON
						.stringify(item)),
				})
			},
			
		}
	}
</script>

<style>
	.my {
		padding: 30rpx;
		margin: 25rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.my-view {
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
	}

	.text-wrap {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 32rpx;
	}

	.name_v {
		margin-top: 23rpx;
		width: 450rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
	}

	.text-wrap text:nth-child(2) {
		margin-top: 15rpx;
		font-size: 28rpx;
		color: #9A9A9A;
	}

	.my-text {
		color: #9A9A9A;
		margin-bottom: 10rpx;
	}

	.demo-bt {
		margin-left: 550rpx;
		padding-top: 8rpx;
		color: #ffffff;
		width: 90rpx;
		height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8px;
		background-color: #4b5ad9;
	}

	.tab-view {
		margin: 0 auto;
		width: 80%;
		height: 100rpx;
		position: relative;
		top: -80rpx;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
		border-radius: 0rpx 0rpx 35rpx 35rpx;
		color: white;
	}

	.con-view {
		margin-top: 90rpx;
		padding: 30rpx 0rpx;
		height: 1030rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag image {
		margin-top: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.demo-tag-text {
		width: 235rpx;
		line-height: 1;
		padding: 4rpx 9rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
</style>
